<template>
    <div class="box">
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm">
            <el-form-item label="菜单名称" prop="title">
                <el-input v-model="ruleForm.title" type="text" autocomplete="off" />
            </el-form-item>
            <el-form-item label="上级菜单">
                <el-select v-model="ruleForm.level" placeholder="请选择">
                    <el-option label="无上级目录" :value="0" />
                    <el-option v-for="item in tableData" :label="item.title" :value="item.id" />
                </el-select>
            </el-form-item>
            <el-form-item label="前端名称" prop="name">
                <el-input v-model.number="ruleForm.name" />
            </el-form-item>
            <el-form-item label="前端图标">
                <el-input v-model.number="ruleForm.icon" />
            </el-form-item>
            <el-form-item label="是否显示">
                <el-radio-group v-model="ruleForm.hidden">
                    <el-radio :label="0" size="large">显示</el-radio>
                    <el-radio :label="1" size="large">隐藏</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="排序" placeholder="请输入">
                <el-input v-model="ruleForm.sort" type="text" autocomplete="off" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm()">确定</el-button>
                <el-button @click="resetForm()">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { user } from '@/api';
import { useRouter, useRoute } from "vue-router"

const router = useRouter()
const route = useRoute()

const ruleFormRef = ref<FormInstance>()

const checkAge = (rule: any, value: any, callback: any) => {
}

const validatePass = (rule: any, value: any, callback: any) => {
}
const validatePass2 = (rule: any, value: any, callback: any) => {
}
const query = reactive({
    // keyword: "",
    parentId: 0,
    pageSize: 100,
    pageNum: 1,
    total: 0
});
let tableData: IBackgroundReturn[] = reactive([])
user.menuListAPI(query).then(res => {
    Object.assign(tableData, res.data.list)
    console.log(tableData,);


})
const ruleForm: IBackgroundReturn = reactive({
    hidden: 0,
    icon: "",
    level: "",
    name: "",
    parentId: 0,
    sort: "",
    title: ""
})
const id = ref(route.query.id)
const rules = reactive<FormRules>({
    title: [{ required: true, message: '菜单名称不能为空', trigger: 'blur' },],
    name: [{ required: true, message: '前端名称不能为空', trigger: 'blur' },],
})

const editFn = () => {
    // id.value = route.query.id
    user.obtainUserAPI(id.value as any).then(res => {
        console.log(res);
        Object.assign(ruleForm, res.data)
    })
}
if (route.query.id) {
    editFn()
}

const submitForm = () => {
    if (route.query.id) {
        console.log(1);
        user.UpdateMenuAPI(id.value as any, ruleForm).then(res => {
            console.log(res);
            router.push("menu")
        })

    } else {
        console.log(2);

        ruleForm.parentId = ruleForm.level
        user.menuCreateAPI(ruleForm).then(res => {
            console.log(res);
            router.push("menu")
        })
    }

}

const resetForm = () => {
    router.push("menu")
}
</script>

<style lang="less" scoped>
.box {
    margin-top: 30px;

    :deep(.el-form-item__label) {
        margin-top: 10px;
        font-size: 16px;
    }

    :deep(.el-input) {
        height: 45px;
    }

    .el-form-item {
        .el-input {
            height: 45px;
            width: 400px;
        }
    }


}
</style>